<template>
	<div class="">
		<el-container>
			<el-aside width="200px">
				<el-tree :data="ModuleList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
			</el-aside>
			<el-main>
				<el-form :model="editForm" :rules="editFormrules" ref="editFormRef" label-width="70px">
					<el-form-item>
						<el-button type="success" @click="add(editForm)">添加子节点</el-button>
						<el-button type="primary" @click="edit(editForm)">设置父节点</el-button>
						<el-button type="danger" @click="del(editForm)">删除</el-button>
					</el-form-item>
					<el-form-item><span id="">功能模块信息维护</span></el-form-item>
					<el-form-item label="Id">
						<el-input :disabled="true" v-model="editForm.Id"></el-input>
					</el-form-item>
					<el-form-item label="名字" prop="Name">
						<el-input v-model="editForm.Name"></el-input>
					</el-form-item>
					<el-form-item label="父Id" prop="parentId">
						<el-input v-model="editForm.ParentId" :disabled="parentdisabled"></el-input>
					</el-form-item>
					<el-form-item label="路径" prop="url">
						<el-input v-model="editForm.Path"></el-input>
					</el-form-item>
					<el-form-item label="权重" prop="weight">
						<el-input v-model="editForm.Weight"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="success" @click="editmodulesinfo(editForm)">保存</el-button>
					</el-form-item>
				</el-form>
			</el-main>
		</el-container>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				defaultProps: {
					children: 'children',
					label: 'Name'
				},
				// 存放模块列表数据
				ModuleList: [],
				formName: {},
				//编辑模块表单验证的验证规则对象
				editFormrules: {
					Name: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 10,
							message: '用户名的长度在2~10之间',
							trigger: 'blur'
						}
					]
				},
				//用户查询到的用户信息对象
				editForm: {
					Id: '',
					Name: '',
					Path: '',
					ParentId: '',
					Weight: '',
				},
				parentdisabled: true
			};
		},
		created() {
			this.getmoduleslist()
		},
		methods: {
			async getmoduleslist() {
				const data = await this.$http.get(
					'api/api/Module/getmoudulelist'
				)
				this.ModuleList = data.data.data
			},
			//展示编辑模块对话框
			async handleNodeClick(modulesinfo) {
				this.editForm = modulesinfo
			},
			//修改模块信息并提交
			async editmodulesinfo(formName) {
				if (formName.Id !== null && formName.Id !== "") {
					//不等于0说明是编辑
					if (formName.Id !== 0) {
						this.$refs.editFormRef.validate(async valid => {
							if (!valid) return;
							const {
								data: res
							} = await this.$http.post('/api/api/Module/editmoudules', formName);
							if (res.code != 0) {
								this.$message.error(res.msg);
							}
							this.$message.success(res.msg);
							this.getmoduleslist();
							this.editForm = {};
						})
					} else {
						this.$refs.editFormRef.validate(async valid => {
							if (!valid) return;
							const {
								data: res
							} = await this.$http.post('/api/api/Module/addmoudules', formName);
							if (res.code != 0) {
								this.$message.error(res.msg);
							}
							this.$message.success(res.msg);
							this.getmoduleslist();
							this.editForm = {};
						})
					}
				} else {
					return this.$message.warning("请先选择")
				}
			},
			add(editForm) {
				if (editForm.Id == null || editForm.Id == "") {
				return this.$message.warning("请先选择");
				}
				this.editForm = {};
				this.disabled = false;
				this.parentdisabled = false;
				this.editForm.Id = 0;
				this.editForm.ParentId = editForm.Id
			},
			async edit(editForm) {
				if (this.editForm.Id == null || this.editForm.Id == "") {
					return this.$message.warning("请先选择");
				}
				this.parentdisabled = false
				const {
					data: res
				} = await this.$http.post('/api/api/Module/setParents',
					editForm
				);
				if (res.code != 0) {
					this.$message.error(res.msg);
				}
				this.$message.success(res.msg);
				this.getmoduleslist();
				this.editForm = {}
			},
			async del(editForm) {
				if (this.editForm.Id == null || this.editForm.Id == "") {
					return this.$message.warning("请先选择");
				}
				const confirmResult = await this.$confirm('此操作将永久删除节点以及节点下的节点, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
				//如果用户取消删除则 则打印cancel字符串
					.catch(err => err);
				//如果用户确认删除则confirmResult 为confim字符串
				if (confirmResult != 'confirm') {
					return this.$message.info('已经取消删除');
				}
				const {
					data: res
				} = await this.$http.post('/api/api/Module/delmoudules',
					editForm
				);
				if (res.code != 0) {
					this.$message.error('删除失败' + res.msg);
				}
				this.$message.success('删除成功');
				this.getmoduleslist();
				this.editForm = {}
			}
		}
	};
</script>
<style></style>
